<!--
 * @Author: chunlai
 * @Date: 2023-12-13 10:08:47
 * @LastEditTime: 2025-11-19 15:51:34
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\form\components\ocr\ImgUploadModule.vue
 * @Description: 证件照上传模块
-->
<template>
  <div class="flx-cc" @click="$emit('changeType', imgtype)">
    <van-uploader :max-count="1" :after-read="afterRead">
      <div class="card-box">
        <van-image class="imgBox" fit="contain" :src="imgUrl" v-if="imgUrl" />
        <img :src="`${imgUrlPath}/img/${getImgName}.jpg`" v-else />
      </div>
      <p class="p-txt" v-if="imgtype == 'back'">
        点击拍摄/上传{{ this.idType == "0" ? "国徽面" : "反面" }}
      </p>
      <template v-else>
        <p class="p-txt" v-if="ocrType === 'bank'">点击拍摄/上传卡号面</p>
        <p class="p-txt" v-else>
          点击拍摄/上传{{ this.idType == "0" ? "人像面" : "正面" }}
        </p>
      </template>
    </van-uploader>
  </div>
</template>

<script>
export default {
  name: "ImgUploadModule",
  props: {
    idType: {
      type: String,
      default: () => "0",
    },
    imgtype: {
      type: String,
      default: () => "face",
    },
    ocrType: {
      type: String,
      default: () => "bank",
    },
    imgUrl: {
      type: String,
      default: () => "",
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    getImgName() {
      let res = "";
      if (this.imgtype == "face") {
        if (this.ocrType == "bank") {
          res = "eg_common";
        } else {
          res = "ocr_z";
        }
      } else if (this.imgtype == "back") {
        res = "ocr_f";
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    afterRead(file) {
      this.$emit("sendFile", file);
    },
  },
};
</script>
<style lang="less" scoped>
.card-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 98px;
  background: #f4f8fe;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}
.imgBox {
  width: 120px;
  height: 80px;
}
.p-txt {
  width: 150px;
  height: 34px;
  background: #6699ff;
  border-radius: 0px 0px 10px 10px;
  text-align: center;
  line-height: 34px;
  font-size: 12px;
  color: #fff;
}
</style>
